<template>
	<view>
		<tt-bar leftIcon="icon-back" title="助力好课" titleAlign="left"></tt-bar>
		<view class="constant">
			<view class="img" @tap="tohuodongguize"><image class="bannerImg" src="http://m.qpic.cn/psc?/V10bU8y22MQDQX/TmEUgtj9EK6.7V8ajmQrEBTJl68Pb*7a0mq82N3vAhmxFShLpm1DI57zdDx8SleyDUEh1kITtwt4VxZazomDZ1b5AxhaksiHKVpyF6tf0Vg!/b&bo=7gItAe4CLQEDJwI!&rf=viewer_4"></image></view>
			<view class="helpList" >
				<view class="helpShopping" v-for="(item, index) in Helplist" :key="index">
					<view class="tupian" @tap="toGood(item.courseId)"><image :src="item.courseImg"></image></view>
					<view class="shoppingName">
						<view class="className">
							<text>{{ item.name }}</text>
						</view>
						<view class="jigou" @tap="toShop(item.storeId)">
							<text>{{ item.storeName }}</text>
						</view>
						<view class="huodongjia">
							<text>最低￥</text>
							<text class="huodongjiaA">{{ item.underPrice }}</text>
						</view>
						<view class="youhuijia">
							<text>原价{{ item.price }}元</text>
						</view>
					</view>
					<view class="helpBtn">
						<view class="jvli">
							<text>{{ dis }}</text>
						</view>
						<view class="btn" @tap="helpjincheng(index)" v-if="item.type == 0"><text>发起助力</text></view>
						<view class="btn" @tap="helpjincheng(index)" v-else><text>继续助力</text></view>
					</view>
				</view>
			</view>
			<!-- 登录的新组件 -->
			<uni-popup ref="popup" type="center" mask-click="false" @touchmove.stop.prevent="moveHandle">
				<newlogin @tap="close"></newlogin>
			</uni-popup>
			<emptyBox v-if="Helplist < 1"></emptyBox>
		</view>
	</view>
</template>

<script>
import COMM from '@/common/common.js';
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	computed: {
		...mapState({
			locationCity: state => state.map.locationCity,
			roads: state => state.map.roads,
			selectCity: state => state.map.selectCity,
			initInfo: state => state.sys.initInfo,
			roads: state => state.map.roads,
			isLogin: state => state.user.isLogin,
			userInfo: state => state.user.userInfo,
		})
	},
	data() {
		return {
			Helplist: [],
			dis: '0米',
			powerInId:0
		};
	},
	methods: {
		open() {
			// 通过组件定义的ref调用uni-popup方法
			this.$refs.popup.open();
			
		},
		
		close() {
			// 通过组件定义的ref调用uni-popup方法
			this.$refs.popup.close();
			
		},
		getData() {
			if(this.isLogin){
				this.$store
					.dispatch('apiGetHelplist', {
						cityCode: this.selectCity.cityCode,
						userId:this.userInfo.userId
					})
					.then(res => {
						console.log(res);
						this.Helplist = res.data.cityPower;
						for (var i = 0; i < this.Helplist.length; i++) {
							let lat1 = this.Helplist[i].lati;
							let lng1 = this.Helplist[i].longi;
							let lat2 = this.roads.latitude;
							let lng2 = this.roads.longitude;
							this.dis = COMM.getDis(lat1, lng1, lat2, lng2);
						}
					});
			}else{
				this.$store
					.dispatch('apiGetHelplist', {
						cityCode: this.selectCity.cityCode,
						userId:0
						
					})
					.then(res => {
						console.log(res);
						this.Helplist = res.data.cityPower;
						for (var i = 0; i < this.Helplist.length; i++) {
							let lat1 = this.Helplist[i].lati;
							let lng1 = this.Helplist[i].longi;
							let lat2 = this.roads.latitude;
							let lng2 = this.roads.longitude;
							this.dis = COMM.getDis(lat1, lng1, lat2, lng2);
						}
					});
			}
			
		},
		helpjincheng(index) { // 发起助力
		
		if(this.isLogin){
	
			var helpList = JSON.stringify(this.Helplist[index]);
					this.apiOpenApowerlog(index);
			if(this.Helplist[index].type==0){
				uni.navigateTo({
					url: '../HelpOrder/HelpOrder?index=' + helpList
				})
				
			}else{
				
				this.$store
					.dispatch('apiOpenGetPowerInId', {
						userId: this.userInfo.userId,
						actPowerId: this.Helplist[index].id,				
					})
					.then(res => {
						// console.log(res)
						this.powerInId = res.data.powerInId.id
						// console.log(this.powerInId)
						uni.navigateTo({
							url: '../helpjincheng/helpjincheng?index=' + helpList + "&powerInId=" +this.powerInId
						})
					});
				
			}
		}else{
			
			// this.toPage('login');
			this.open()
		}
		
		
					
		},
		toShop(storeId) {
			this.toPage({
				url: 'shopDetail',
				id: storeId
			});
		},
		toGood(courseId) {
			this.toPage({
				url: 'goodDetail',
				id: courseId
			});
		},
		tohuodongguize(){
			uni.navigateTo({
				url: '../huodongguize/huodongguize'
			})
		},
		apiOpenApowerlog(index){
			this.$store
				.dispatch('apiOpenApowerlog', {
					userId :this.userInfo.userId,
					type:2,
					storeId:this.Helplist[index].storeId
				})
				.then(res => {					
					console.log(res);										
				});
		}
		
		
	},
	onLoad() {
		this.getData();
	},
	onShow() {		
		this.getData();
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.getData();
			uni.stopPullDownRefresh();
		}, 1500);
	}
};
</script>

<style lang="less">
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background-color: #fff8e6;
}
.bannerImg {
	width: 100%;
	height: 300rpx;
}
.helpList {
	// background-color: #eceded;
	width: 95%;
	height: 100%;
	margin-left: 20rpx;
	margin-top: 20rpx;
	margin-right: 20rpx;
	border-radius: 10rpx;
	.helpShopping {
		width: 100%;
		height: 250rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 10rpx 15rpx;
		display: flex;
		overflow: hidden;

		.tupian {
			width: 200rpx;
			height: 100%;
			display: flex;
			align-items: center;
			image {
				border-radius: 10rpx;
				width: 100%;
				height: 200rpx;
			}
		}
		.shoppingName {
			flex: 2;
			height: 100%;
			padding-left: 15rpx;
			display: flex;
			padding-top: 10rpx;
			flex-direction: column;
			.className {
				font-weight: 700;
				font-size: 30rpx;
				overflow: hidden;				
				height: 78rpx;
			}
			.huodongjia {
				color: red;
				font-weight: 700;
				font-size: 26rpx;
				.huodongjiaA {
					font-size: 38rpx;
				}
			}
			.jigou {
				color: #bebebe;
				font-size: 24rpx;
				 height: 30rpx;
				overflow: hidden;
			}
			.youhuijia {
				text-decoration: line-through;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
		.helpBtn {
			flex: 1;
			height: 100%;
			padding: 25rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.jvli {
				text-align: right;
				color: #bebebe;
				font-size: 24rpx;
				padding-right: 24rpx;
			}
			.btn {
				width: 210rpx;
				height: 55rpx;				
				background-color: red;
				border-radius: 27rpx;
				text-align: center;
				color: #fff;
				font-size: 26rpx;
				font-weight: 700;
				line-height: 55rpx;
			}
		}
	}
}
</style>
